<template>
  <div class="home">
    <!-- 主体地图显示 -->
    <el-container style="height: 30%;">
      <!-- <el-aside>111</el-aside> -->
      <el-main>
        <!-- 顶部工具栏 -->
        <!-- <top-tool-bar @alarmchind="alarmchind" /> -->
        <!-- 地图显示 -->
        <map-view></map-view>
        
      </el-main>
      <!-- 报警信息 -->
      <!-- <el-aside v-if="showWarningInfo">
        <vdr class="vdr" :w="200" :h="50" @resizing="resizeWidth" :draggable="false">
          
          <warning-view></warning-view>
        </vdr>
      </el-aside>-->
    </el-container>
    <!-- 底部信息列表 -->
    <el-footer :class="hideFooter ? 'height0' : ''">
      <vdr 
        class="vdr" 
        @resizing="resize" 
        :draggable="false" 
        
      >
        <div ref="footerTitle" class="footer_title">
         综合实时监控列表
          <i class="iconfont icon-shanchu" @click="toHideFooter()"></i>
        </div>
        <el-tabs  type="border-card" >
          <el-tab-pane label="机扫车辆实时监控列表" >
            <monitoring-Car-view></monitoring-Car-view>
          </el-tab-pane>
          <el-tab-pane label="清运车辆实时监控列表">
            <monitoring-Rubbish-view></monitoring-Rubbish-view>
          </el-tab-pane>
          <el-tab-pane label="人工保洁实时监控列表">
            <monitoring-Worker-view></monitoring-Worker-view>
          </el-tab-pane>
          <el-tab-pane label="吸粪车辆实时监控列表">
            <monitoring-ToiletCar-view></monitoring-ToiletCar-view>
          </el-tab-pane>
          <el-tab-pane label="维保人员实时监控列表">
            <monitoring-ToiletWorker-view></monitoring-ToiletWorker-view>
          </el-tab-pane>
          <el-tab-pane label="公厕实时监控列表">
            <monitoring-toilet-view></monitoring-toilet-view>
          </el-tab-pane>
        </el-tabs>
      </vdr>
    </el-footer >
    <div class="cover" v-if="coverIsShow" @click="closeCover"></div>
  </div>
</template>

<script>
// 引入地图组件
import mapView from '@/views/Comprehensive/Map/ComprehensiveMap.vue'
// 引入机扫监控列表组件
import monitoringCarView from '@/views/Vehicle/Map/VehicleMonitoring.vue'
// 引入清运监控列表组件
import monitoringRubbishView from '@/views/Rubbish/Map/RubbishMonitoring.vue'
// 引入清运监控列表组件
import monitoringWorkerView from '@/views/Worker/Map/WorkerMonitoring.vue'
// 引入公厕设施监控列表组件
import monitoringToiletView from '@/views/WC/Map/MonitoringToilet.vue'
// 引入维保人员监控列表组件
import monitoringToiletWorkerView from '@/views/WC/Map/MonitoringWorker.vue'
// 引入吸粪车辆监控列表组件
import monitoringToiletCarView from '@/views/WC/Map/MonitoringCar.vue'

import eventBus from '@/eventBus.js'

export default {
  components: {
    'map-view': mapView,
    'monitoring-Car-view': monitoringCarView,
    'monitoring-Rubbish-view': monitoringRubbishView,
    'monitoring-Worker-view': monitoringWorkerView,
    'monitoring-toilet-view': monitoringToiletView,
    'monitoring-ToiletWorker-view': monitoringToiletWorkerView,
    'monitoring-ToiletCar-view': monitoringToiletCarView,
  },
  data () {
    return {
      originalData: [],
      areaName: '',
      coverIsShow: false,
      containerHeight: 0,
      footerHeight: 0,
      mainWidth: 0,
      asideWidth: 0,
      hideFooter: false,
      timeID: null,
    }
  },
  created () {
    // 显示底部列表
    eventBus.$on('toShowFooter', () => {
      this.hideFooter = false;
    })
    // 隐藏底部列表
    eventBus.$on('toHideFooter', () => {
      this.hideFooter = true;
    })
  },
  mounted () {
    this.onlineStatisticsComprehensive()
    this.setIntervalOnlineStatisticsComprehensive()
    eventBus.$emit('mapSize', document.querySelector('.el-main').clientHeight - 32)
    this.containerHeight = document.querySelector('.el-container').clientHeight
    this.footerHeight = document.querySelector('.el-footer').clientHeight
    this.mainWidth = document.querySelector('.el-main').clientWidth
  },
  beforeDestroy () {
    clearInterval(this.timeID)
  },
  methods: {
    // 自动查询
    setIntervalOnlineStatisticsComprehensive () {
        var that = this
        this.timeID = setInterval(() => {
          that.onlineStatisticsComprehensive()
        }, 30000)
    },
    // 实时在线统计
    async onlineStatisticsComprehensive () {
      var url = 'Comprehensive/GetVehicleCurrentInfo?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&typeName=&typeQuery=1'
      const { data } = await this.$Http.get(url)
      eventBus.$emit('onlineStatisticsComprehensive', data)
    },
    // 信息列表窗口缩放
    resize (x, y) {
      document.querySelector('.el-footer').style.height = this.footerHeight - y + 'px'
      document.querySelector('.el-container').style.height = this.containerHeight + y + 'px'
      eventBus.$emit('mapSize', y)
    },
    // 隐藏底部列表
    toHideFooter() {
      this.hideFooter = true;
      eventBus.$emit('toHideFooter');
    }
  }
}
</script>

<style scoped lang="less">
.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.el-header {
  height: 60px;
  .logo {
    float: left;
    line-height: 60px;
    img {
      height: 50px;
      margin-right: 20px;
      vertical-align: middle;
    }
  }
  .title_name {
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    color: #007acc;
    font-weight: 600;
  }
  .title_company {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #007acc;
    font-weight: 200;
  }
  .avatar {
    height: 60px;
    line-height: 60px;
    float: right;
    position: relative;
    .header_img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      width: 40px;
      height: 40px;
      // background-color: #000;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .account_name {
      cursor: pointer;
      color: #007acc;
    }
    .account_info {
      width: 100px;
      line-height: 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      span {
        display: block;
        text-align: center;
        line-height: 22px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #007acc;
        }
      }
    }
  }
}

.el-container {
  flex: 1;
}

.top_box {
  display: flex;
  height: 594px;
  .sidebar {
    width: 200px;
    display: none;
  }
  .content {
    flex: 1;
    .content-box {
      display: flex;
      // position: relative;
      .map_view {
        flex: 1;
      }
    }
  }
}
.el-tabs {
    cursor: s-resize;
    height: 100% !important;
  /deep/.el-tabs__content {
    padding: 0px;
    height: 100%;
  }
  /deep/.el-tab-pane {
    height: 100%;
  }
}
.el-footer {
  width: 100%;
  min-height: 220px !important;
  max-height: 776px;
  background: #fff;
  &.height0 {
    min-height: 0 !important;
    height: 0 !important;
  }
  .footer_title {
    line-height: 30px;
    background-color: rgb(32, 105, 179);
    color: #fff;
    // cursor: s-resize;
    padding-left: 20px;
    font-weight: 600;
    i {
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
.el-aside {
  // height: 300px;
  overflow: hidden;
  /deep/.handle-tm {
    display: none !important;
  }
}
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.warning_details {
  width: 90%;
  height: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  overflow: hidden;
  padding-bottom: 10px;
  h2 {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    color: #666;
    border-bottom: 1px solid #ccc;
    span {
      margin-right: 5px;
    }
    i {
      margin-left: 90%;
    }
  }
  .warning_menu {
    height: 45px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding-left: 5px;
    span {
      margin-left: 10px;
      display: flex;
      align-items: center;
      color: #666;
      &.warning_nums {
        margin-left: 0;
        // justify-content: center;
        padding: 0 4px;
        border-bottom: 1px solid #ccc;
      }
    }
    .el-select {
      width: 150px;
      height: 26px;
    }
    #group {
      width: 100px;
    }
  }
  .warningContent {
    height: 330px;
    // overflow-y: auto;
    .el-table {
      height: 100%;
      /deep/.el-table__body-wrapper {
        height: calc(~'100% - 35px');
        overflow-y: auto;
        padding-right: 10px;
        box-sizing: border-box;
      }
    }
  }
}

.vdr {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  // bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
/deep/.handle-tm {
  width: 100% !important;
  height: 5PX;
  top: -5px !important;
}
</style>
